<template>
  <dir class="payslip-excel-detail">
    <a-button class="mg_b12" icon="left" type="link" @click="$router.go(-1)">
      返回
    </a-button>
    <a-table
      :row-key="(i, j) => j"
      :pagination="pagination"
      :columns="columns"
      :data-source="dataSource"
      :scroll="{ x: 1500, y: 400 }"
      @change="change"
    >
      <template slot="sendType" slot-scope="sendType">
        <img v-if="sendType === 1" src="@/assets/img/payslip/weixin.png" />
        <img v-if="sendType === 2" src="@/assets/img/payslip/xuanzhong.png" />
      </template>
      <template slot="readStatus" slot-scope="readStatus">
        <img v-if="!readStatus" src="@/assets/img/payslip/weixuanzhong.png" />
        <img v-if="readStatus" src="@/assets/img/payslip/xuanzhong.png" />
      </template>
      <template slot="checkStatus" slot-scope="checkStatus">
        <img v-if="!checkStatus" src="@/assets/img/payslip/weixuanzhong.png" />
        <img v-if="checkStatus" src="@/assets/img/payslip/xuanzhong.png" />
      </template>
    </a-table>
  </dir>
</template>

<script>
export default {
  name: "PayslipExcelDetail",
  data() {
    return {
      dataSource: [],
      columns: [
        { title: "员工姓名", width: 150, dataIndex: "empName", fixed: "left" },
        {
          title: "发送方式",
          dataIndex: "sendType",
          width: 150,
          scopedSlots: { customRender: "sendType" }
        },

        {
          title: "确认工资条",
          dataIndex: "checkStatus",
          width: 150,
          scopedSlots: { customRender: "checkStatus" }
        },
        {
          title: "手机号",
          dataIndex: "phone",
          width: 150
        },
        {
          title: "个人所得税",
          dataIndex: "empTax",
          width: 150
        },
        {
          title: "个人社保",
          dataIndex: "empSoc",
          width: 150
        },
        {
          title: "个人公积金",
          dataIndex: "empPf",
          width: 150
        },
        {
          title: "基本工资",
          dataIndex: "salaryBasic",
          width: 150
        },
        {
          title: "应发工资",
          dataIndex: "salaryAmount",
          width: 150
        },
        {
          title: "实发工资",
          dataIndex: "salaryReal",
          width: 150
        }
      ],
      pagination: {
        current: 1,
        total: 0,
        pageSize: 1000
      },
      params: {
        pageNo: 1,
        pageSize: 1000
      }
    };
  },

  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      this.$request({
        url: `/hr/api/v1/salaryBillSends/salaryBillPageBySendDetail`,
        params: { ...this.params, sendId: this.$route.query.id, sendStatus: 1 }
      }).then(({ data }) => {
        this.dataSource = data.entities || [];
        this.pagination.total = data.entityCount || 0;

        this.dataSource.forEach(item => {
          item.salaryBillFieldsDOList.forEach(key => {
            key.dataIndex = key.sort;
          });
        });
        const colum = [];
        this.dataSource[0].salaryBillFieldsDOList.map(key => {
          colum.push({
            dataIndex: key.sort,
            title: key.fieldName,
            width: 150
          });
        });
        this.dataSource = this.dataSource.map(item => {
          const obj = {};
          item.salaryBillFieldsDOList.map(key => {
            obj[key["dataIndex"]] = key["fieldValue"];
          });
          item = { ...item, ...obj };

          return item;
        });
        this.columns = [...this.columns, ...colum];
      });
    },
    change(e) {
      this.params.pageNo = e.current;
      this.pagination.current = e.current;
      this.getList();
    }
  }
};
</script>

<style scoped>
.payslip-excel-detail {
  padding: 24px;
}
</style>
